<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-wrap-layout-popup">
  <div class="ddp-box-popup ddp-box-popup-type3">
    <a href="javascript:" class="ddp-btn-close" (click)="close()"></a>
    <!-- title -->
    <div class="ddp-pop-title">{{'msg.nbook.ui.model.reg' | translate}}</div>
    <!-- //title -->
    <!-- detail -->
    <div class="ddp-box-detail">
      <div class="ddp-box-form">

        <div class="ddp-wrap-edit3 ddp-type">
          <label class="ddp-label-type">{{'msg.nbook.th.format' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <label class="ddp-label-radio">
              <input type="radio" name="radioFormat" [checked]="selectedFormat == 'HTML'" (click)="setSelectFormat('HTML')">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{'msg.nbook.ui.html' | translate}}</span>
            </label>
            <label class="ddp-label-radio">
              <input type="radio" name="radioFormat" [checked]="selectedFormat == 'JSON'" (click)="setSelectFormat('JSON')">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{'msg.nbook.ui.json' | translate}}</span>
            </label>
          </div>
          <!-- //edit option -->
        </div>

        <div class="ddp-wrap-edit2">
          <label class="ddp-label-type">{{'msg.comm.ui.name' | translate}}</label>
          <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.name' | translate}}" [(ngModel)]="argName">
        </div>

        <div class="ddp-wrap-edit2">
          <label class="ddp-label-type">{{'msg.comm.ui.description' | translate}}</label>
          <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.desc' | translate}}" [(ngModel)]="argDescription">
        </div>
      </div>

    </div>
    <!-- detail -->

    <!-- button -->
    <div class="ddp-ui-buttons">
      <a href="javascript:" class="ddp-btn-type-popup" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
      <!-- disabled 시 ddp-disabled 추가 -->
      <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black " (click)="setRequest()">{{'msg.comm.btn.request' | translate}}</a>
    </div>
    <!-- //button -->
  </div>
</div>
